<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../0517/js/jquery-3.7.0.min.js"></script>
		<style>
			.panel{
				border: 4px solid #ddd;
				width: 192px;
				margin: 100px auto;
				border-radius: 6px;
			}
			.panel p, .panel input{
				font-family: '微软雅黑';
				font-size: 20px;
				margin: 4px;
				float: left;
			}
			.panel p{
				width: 122px;
				height: 26px;
				border: 1px solid #ddd;
				padding: 6px;
				overflow: hidden;
			}
			
			.panel input{
				width: 40px;
				height: 40px;
				border: 1px solid #ddd;
			}
			#txt
			{
				width: 66.5%;
				font-size: 16px;
				font-weight: bold;
				color: #080808;
				border: black 2px solid;
			}
		</style>
	</head>
	<body>
		<div class='panel' onclick="">
			<div>
				
				<input type="text" id="txt"  readonly>
				<input type="button" id="C" value="C" onClick="Clear()">
				<div style="clear: both;"></div>
			</div>
			<div>
				<input type="button"onClick="TNumber(this.value)" value="7"/>
				<input type="button"onClick="TNumber(this.value)" value="8"/>
				<input type="button"onClick="TNumber(this.value)" value="9"/>
				<input type="button"onClick="TNumber(this.value)" value="/"/>
				
				<input type="button"onClick="TNumber(this.value)" value="4"/>
				<input type="button"onClick="TNumber(this.value)" value="5"/>
				<input type="button"onClick="TNumber(this.value)" value="6"/>
				<input type="button"onClick="TNumber(this.value)" value="*"/>
				
				<input type="button"onClick="TNumber(this.value)" value="1"/>
				<input type="button"onClick="TNumber(this.value)" value="2"/>
				<input type="button"onClick="TNumber(this.value)" value="3"/>
				<input type="button"onClick="TNumber(this.value)" value="-"/>
				
				<input type="button"onClick="TNumber(this.value)" value="0"/>
				<input type="button"onClick="TNumber(this.value)" value="."/>
				<input type="button"onClick="Calculator()" value="="/>
				<input type="button"onClick="TNumber(this.value)" value="+"/>
				
				<div style="clear: both;"></div>
			</div>
		</div>
	</body>
	<script>
		$(function(){
			var sum="";
		function TNumber(value){
			document.getElementById("txt").value+=value;
			sum+=value;
		}
		function Clear(){
			document.getElementById("txt").value="";
			sum="";
		}
		function Calculator(){
			document.getElementById("txt").value=sum+"="+eval(sum);
			// document.getElementById("txt").value=eval(sum);
		}
		})
		
	</script>
</html>